<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站后台管理系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->
<link rel="stylesheet" type="text/css"  href="../../../../public/layui/css/layui.css">
<link href="../../../../public/admin/css/style_v2.0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/style_v2.0.css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/js/g2.js"></script>
</head>
<body>
    <div class="layui-box1" style="background-color:#FFFFFF;">
    <div class="layui-row layui-col-space10" >
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg1">
              <div class="grid_content2" id="grid_ico05">
                  <p>本月统计</p>
                  <span><i>收入：</i>￥{$month_income}<i></i></span><div class="c"></div>
                  <span><i>支出：</i>￥{$month_outlay}<i></i></span><div class="c"></div>
                  <span><i>利润：</i>￥{$month_profits}<i></i></span><div class="c"></div>
              </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo  grid-demo-bg2">
             <div class="grid_content2" id="grid_ico06">
                  <p>年度统计</p>
                  <span><i>收入：</i>￥{$year_income}<i></i></span><div class="c"></div>
                  <span><i>支出：</i>￥{$year_outlay}<i></i></span><div class="c"></div>
                  <span><i>利润：</i>￥{$year_profits}<i></i></span><div class="c"></div>
              </div>
          
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg5">
            <div class="grid_content2" id="grid_ico07">
                   <p>历史统计</p>
                  <span><i>收入：</i>￥{$all_income}<i></i></span><div class="c"></div>
                  <span><i>支出：</i>￥{$all_outlay}<i></i></span><div class="c"></div>
                  <span><i>利润：</i>￥{$all_profits}<i></i></span><div class="c"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg3">
              <div class="grid_content2" id="grid_ico08">
                   <p>续费统计</p>
                  <span><i>本月：</i>￥{$month_xufei}<i></i></span><div class="c"></div>
                  <span><i>本年：</i>￥{$year_xufei}<i></i></span><div class="c"></div>
                  <span><i>全部：</i>￥{$all_xufei}<i></i></span><div class="c"></div>
              </div>
          </div>
        </div>
      </div>
</div><!--栅格图标-->
<div class="c"></div>
<div class="tubbiao">
      <div class="tongji01">
          <div class="tongji_box">
              <div class="tongji_title" id="ico_zhu">12个月收入统计</div>
              <div id="finance_all" style="width:100%; height:320px;"></div>
          </div>
      </div><!--12个月网站统计图-->
      <div class="tongji01_right">
          <div class="tongji02">
                <div class="tongji_title" id="ico_group">续费统计</div>
                <div id="xufei_stat"></div>
          </div><!--各分组网站数量-->
      </div><!--右侧-->
      <div class="c"></div>
</div><!--图表-->

<div class="tubbiao">
      <div class="tongji01">
          <div class="tongji_box">
              <div class="tongji_title" id="ico_zhu">12个月新增网站统计</div>
              <div id="web_all"></div>
          </div>
      </div><!--12个月网站统计图-->
      <div class="tongji01_right">
          <div class="tongji02">
                <div class="tongji_title" id="ico_group">各分组网站数量</div>
                <div id="group_num"></div>
          </div><!--各分组网站数量-->
      </div><!--右侧-->
      <div class="c"></div>
</div><!--图表--><!--第三部分-->
    <script>
      var data = {$tongji}; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
	  var Frame = G2.Frame;
		var frame = new Frame(data);
		frame = Frame.combineColumns(frame, ['income', 'outlay', 'profits'], 'value', 'type', 'year');
		var chart = new G2.Chart({
		  id: 'finance_all',  // 指定图表容器 ID
		  height : 320,     // 指定图表高度
		  forceFit: true, // 图表自适应宽度
		  plotCfg: {
			background: {
			  stroke: '#ccc', // 边颜色
			  lineWidth: 1, // 边框粗细
			}
		  }
		});
		chart.source(frame, {
		  year: {
		   // type: "timeCat",
			mask: "yyyy-mm"
		  }
		});
		// 绘制线图
		chart.intervalDodge().position('year*value').color('type').shape('type', function(val) {
		  if (val === 'end') {
			return 'line'; 
		  } else {
			return 'dash'; // 满足该条件设置为虚线
		  }
		});
		chart.render();
		
		 /*绘制分组图*/
	 var data2 ={$xufei};
     var chart2 = new G2.Chart({
        id: 'xufei_stat', // 指定图表容器 ID
        forceFit: true,
		//width : 800, // 指定图表宽度
        height : 320 // 指定图表高度
      });
      // Step 2: 载入数据源,定义列信息
      chart2.source(data2, {
        year: {
          alias: '' // 列定义，定义该属性显示的别名
        },
        num: {
          alias: '金额'
        }
      });
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
       chart2.interval().position('year*num').color('year')
     // chart.line().position('year*num').size(2);
      chart2.render();
		
    </script>
   <script>
      var data3 = {$dom}; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      var chart3 = new G2.Chart({
        id: 'web_all', // 指定图表容器 ID
        forceFit: true,
		//width : 800, // 指定图表宽度
        height : 360 // 指定图表高度
      });
      // Step 2: 载入数据源,定义列信息
      chart3.source(data3, {
        year: {
          alias: '' // 列定义，定义该属性显示的别名
        },
        num: {
          alias: '网站新增个数'
        }
      });
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
       chart3.interval().position('year*num').color('year')
     // chart.line().position('year*num').size(2);
      chart3.render();
	  
	  /*绘制分组图*/
	 var data4 ={$group_num};
     var Stat4 = G2.Stat;
     var Frame4 = G2.Frame;
     var frame4 = new Frame4(data4);
      frame4 = Frame4.sort(frame4, 'webnum'); // 将数据按webnum 进行排序，由大到小
      var chart4 = new G2.Chart({
        id : 'group_num',
        forceFit: true,
        height: 360,
        plotCfg: {
          margin: [20, 60, 20, 120]
        }
      });
      chart4.source(frame4);
      chart4.axis('groupname',{
        title: '网站数量'
      });
      chart4.coord('rect').transpose();
      chart4.interval().position('groupname*webnum');
      chart4.render();
    </script>
  </body>
</html>
<script>
layui.use(['form','laydate'], function(){
     var form = layui.form
     ,laydate = layui.laydate;
	 
	 layer.prompt({
		  formType: 1,
		  value: '',
		  title: '请输入查看密码',
		  btn: '确定',
		  closeBtn: 0,
		  shade: ['0.955','#ffffff'],
		}, function(value, index, elem){
		  var $pwd = value;
		  if ($pwd.length > 0){
			  $.ajax({
				  url:"{:U('Finance/check_pwd')}",
				  dataType:"json",
				  data:{'pwd': $pwd },
				  type:'post',
				  success:function(data){
				      if(data == 1){
					      layer.close(index);
					  }else{
					      layer.msg('查看密码输入错误！');
					  }
				  }
		     });
		  }
	  });
})
</script>